<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 高级表格：折叠 + 分组 + 分页</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #000;
      padding: 8px;
      text-align: center;
    }
    .group-header {
      background-color: #f0f0f0;
      cursor: pointer;
      text-align: left;
    }
    .pagination {
      margin-top: 20px;
      text-align: center;
    }
    .pagination button {
      margin: 0 4px;
      padding: 4px 8px;
    }
  </style>
</head>
<body>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>类别</th>
          <th>区域</th>
          <th>信息详情</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(group, groupIndex) in paginatedData" :key="groupIndex">
          <tr class="group-header" @click="toggleGroup(groupIndex)">
            <td>{{ group.category }}</td>
            <td>{{ group.region }}</td>
            <td>
              <span v-if="group.expanded">▲ 收起</span>
              <span v-else>▼ 展开</span>
            </td>
          </tr>
          <tr v-show="group.expanded" v-for="(info, infoIndex) in group.infoList" :key="infoIndex">
            <td colspan="2" style="border: none;"></td>
            <td>{{ info }}</td>
          </tr>
        </template>
      </tbody>
    </table>

    <div class="pagination">
      <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
      <button v-for="page in totalPages" :key="page"
              @click="changePage(page)"
              :style="{ fontWeight: page === currentPage ? 'bold' : 'normal' }">
        {{ page }}
      </button>
      <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        currentPage: 1,
        pageSize: 2,
        dataList: [],
      },
      created() {
        // 模拟生成数据
        for (let i = 0; i < 6; i++) {
          this.dataList.push({
            category: '企业信息归集情况',
            region: '项目信息归集情况',
            expanded: false,
            infoList: [
              '评级信息归集情况',
              '业务系统中企业家数量(家)',
              '信用系统归集企业数量'
            ]
          });
        }
      },
      computed: {
        totalPages() {
          return Math.ceil(this.dataList.length / this.pageSize);
        },
        paginatedData() {
          const start = (this.currentPage - 1) * this.pageSize;
          return this.dataList.slice(start, start + this.pageSize);
        }
      },
      methods: {
        toggleGroup(index) {
          const group = this.paginatedData[index];
          group.expanded = !group.expanded;
        },
        changePage(page) {
          if (page >= 1 && page <= this.totalPages) {
            this.currentPage = page;
          }
        }
      }
    });
  </script>
</body>
</html>
